<template name="emptyBox">
	<view>
		<view class="emptyBox" v-if="!isLoding">
			<image :src="emptyOption[type].imageUrl"></image>
			<text>{{emptyOption[type].text}}</text>
		</view>
		<view class="loding" v-if="isLoding">
			<view class="circle">
				<text class="iconfont icon-loading"></text>
			</view>
			<text class="tt">正在加载中...</text>
		</view>
	</view>
	
</template>

<script>
	export default{	
		name:'emptyBox',		//组件名称
		// 传递参数
		props:{
			type:{
				type:String,
				default:'data'
			},
			isLoding:{
				type:Boolean,
				default:false
			}
		},
		// 组件参数
		data(){
			return {
				emptyOption:{
					data:{
						text:"暂无数据",
						imageUrl:'../../static/order0.png'
					},
					order:{
						text:"暂无订单",
						imageUrl:'../../static/order0.png'
					},
					checkWork:{
						text:"暂无考勤记录",
						imageUrl:'../../static/checkwork0.png'
					},
					class:{
						text:"暂无班级",
						imageUrl:'../../static/class0.png'
					},
					message:{
						text:"暂无消息",
						imageUrl:'../../static/message0.png'
					},
					notice:{
						text:"暂无通知",
						imageUrl:'../../static/notice0.png'
					},
					student:{
						text:"暂无学员",
						imageUrl:'../../static/student0.png'
					},
					coupon:{
						text:"暂无优惠券",
						imageUrl:'../../static/coupon0.png'
					}
				}
			}
		},
		// 组件方法
		methods:{
			mtd1(){
				
			}
		}
	}
</script>

<style lang="less">
	.loding{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 50upx 0;
		.circle{
			width: 40upx;
			height: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;
			transform: rotate(0deg);
			animation-name:xuanzhuan;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			animation-delay: 0s;
		}
		.iconfont{
			font-size: 40upx;
			line-height: 40upx;
			// transform: rotate(0deg);
			// font-weight: bold;
			color: #ffb423;
			
		}
		.tt{
			margin-bottom: 0;
			margin-left: 20upx;
			font-size: 28upx;
			color: #c3c9d6;
		}
	}
	@keyframes xuanzhuan {
		from{
			transform: rotate(0deg);
		}
		to{
			transform: rotate(360deg);
		}
	}
</style>
